<template>
  <div class="home container">
    <div class="left-part">
      <div class="nav">
        <RouterLink
          to="/t/all"
          class="nav-item"
          :class="{
            'router-link-active': $route.path == '/home',
          }"
        >
          全部
        </RouterLink>
        <RouterLink
          v-for="item in types"
          :key="item.id"
          :to="`/t/${item.slug}`"
          class="nav-item"
        >
          {{ item.title }}
        </RouterLink>
      </div>
    </div>
    <div class="right-part">
      <div class="post-part">
        <template v-if="mds.length > 0">
          <div class="post-item" v-for="item in mds" :key="item.id">
            <div class="entry">
              <div class="content-wrapper">
                <div class="content-main">
                  <div class="title">
                    <RouterLink
                      target="_blank"
                      :to="{ name: 'post', params: { id: item.slug } }"
                      >{{ item.title }}</RouterLink
                    >
                  </div>
                  <div class="desc">
                    <RouterLink
                      target="_blank"
                      :to="{ name: 'post', params: { id: item.slug } }"
                      >{{ item.conn }}</RouterLink
                    >
                  </div>
                  <div class="footer">
                    <div class="left">
                      <div class="see">
                        <svg
                          data-v-3f4438ce=""
                          width="16"
                          height="16"
                          viewBox="0 0 16 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          class="view-icon"
                        >
                          <path
                            data-v-3f4438ce=""
                            d="M7.90078 2.80078C4.49278 2.80078 1.74745 6.11672 0.800781 7.77469C1.74745 9.58339 4.49278 13.2008 7.90078 13.2008C11.3088 13.2008 14.0541 9.58339 15.0008 7.77469C14.0541 6.11672 11.3088 2.80078 7.90078 2.80078Z"
                            stroke="currentColor"
                          ></path>
                          <circle
                            data-v-3f4438ce=""
                            cx="7.89922"
                            cy="8.00078"
                            r="2.2"
                            stroke="currentColor"
                          ></circle>
                        </svg>
                        <div class="num">
                          {{ item.views }}
                        </div>
                      </div>
                    </div>
                    <div class="tags">
                      <template
                        v-for="(it, index) in (item.tags || '').split(',')"
                        :key="index"
                      >
                        <span v-if="it" class="tag">
                          {{ it }}
                        </span>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="post-more" @click="loadmore">
            {{ pageUse.end ? "哎呀-没有内容啦" : "加载更多" }}
          </div>
        </template>
        <el-empty class="empty" v-else description="哎呀-没有内容啦" />
      </div>
      <div class="side-part">
        <div class="ad">
          <img src="../assets/wxappimg.jpg" alt="weapp" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from "@/http/api";
import { API_BLOG_TYPES, API_BLOG_MDS } from "@/http/url";
import { RouterLink, useRoute } from "vue-router";

const mds = ref([]);
const pageUse = ref({
  page: 1,
  pageSize: 15,
  end: false,
});
const route = useRoute();

const watchRoute = watch(
  () => route.fullPath,
  () => {
    if (/^(\/home|\/t\/.*)/.test(route.fullPath)) {
      pageUse.value.end = false;
      pageUse.value.page = 1;
      mds.value = [];
      loadMds();
    }
  }
);

function loadMds() {
  // 获取文章
  api
    .get(API_BLOG_MDS, {
      params: {
        current: pageUse.value.page ?? 1,
        size: pageUse.value.pageSize ?? 10,
        slug: route.params?.id ?? "all",
      },
    })
    .then((res) => {
      if (res.ok) {
        mds.value.push(...(res.data.records || []));
        if (res.data.records.length == 0) {
          pageUse.value.end = true;
        }
      } else {
        ElMessage.warning(res.message);
        pageUse.value.end = true;
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
      pageUse.value.end = true;
    });
}

const types = ref([]);

function loadTypes() {
  // 获取分类
  api
    .get(API_BLOG_TYPES)
    .then((res) => {
      if (res.ok) {
        types.value = Object.freeze(res.data);
        loadMds();
      } else {
        ElMessage.warning(res.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
}

onMounted(() => {
  mds.value = [];
  loadTypes();
  window.addEventListener("scroll", pageScroller, true);
});
onUnmounted(() => {
  mds.value = [];
  window.removeEventListener("scroll", pageScroller, true);
  watchRoute();
});

function loadmore() {
  if (!pageUse.value.end) {
    pageUse.value.page++;
    loadMds();
  }
}

function pageScroller() {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    loadmore();
    return;
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  .left-part {
    width: 180px;
    height: fit-content;
    border-radius: 4px;
    background-color: #fff;
    max-height: calc(100vh - 88px);
    overflow-x: hidden;
    position: sticky;
    top: calc(60px + 16px);
  }
  .nav {
    box-sizing: border-box;
    padding: 8px;
    font-size: 16px;
    color: #515767;

    .nav-item {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      padding: 10px 18px;
      color: #515767;
      transition: all 0.3s;
    }

    .nav-item:hover {
      background-color: #f7f8fa;
      color: #1e80ff;
      font-weight: 500;
    }
    .nav-item.router-link-active {
      background-color: #eaf2ff;
      color: #1e80ff;
      font-weight: 500;
    }
  }
  .right-part {
    flex: 1;
    display: flex;
    gap: 16px;
    .post-part {
      flex: 1;
    }
    .empty {
      background-color: #fff;
    }
    .post-more {
      padding: 16px 0;
      text-align: center;
    }
    .side-part {
      width: 260px;
      height: fit-content;

      position: sticky;
      top: calc(60px + 16px);
    }
    .ad {
      box-sizing: border-box;
      padding: 8px;
      background-color: #fff;
    }
  }
}

.post-item {
  .entry {
    cursor: pointer;
    position: relative;
    background: #fff;
    padding: 12px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .content-wrapper {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(228, 230, 235, 0.5);
    width: 100%;
  }
  .content-main {
    flex: 1 1 auto;
  }
  .title {
    display: flex;
    margin-bottom: 2px;
    a {
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      color: #252933;
      width: 100%;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
  .desc {
    display: flex;
    margin-bottom: 2px;
    a {
      color: #8a919f;
      font-size: 13px;
      line-height: 22px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
  .footer {
    position: relative;
    margin-right: 24px;
    font-size: 13px;
    line-height: 20px;
    color: #8a919f;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      gap: 16px;

      .see {
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }
    .tags {
      display: flex;
      align-items: center;
      gap: 6px;
      .tag {
        background-color: #f2f3f5;
        padding: 0 6px;
        border-radius: 2px;
        max-width: 76px;
        box-sizing: border-box;
        margin-left: 6px;
        color: #8a919f;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        min-height: 18px;
        line-height: 18px;
      }
    }
  }
}
</style>
